<template>
	<view>
		<u-navbar title="资料修改">
		</u-navbar>
		<u--form labelPosition="left" :model="userdata" ref="uForm">
			<u-form-item label="头像" prop="avatar" borderBottom>
				<view class="u-flex u-flex-end" style="padding-right: 20rpx;flex: 1;">
					<u-avatar :src="userdata.avatar"></u-avatar>
					<!-- @click="avatartap" -->
				</view>
			</u-form-item>
			<u-form-item label="用户名" prop="nickname" borderBottom>
				<view class="" style="padding-right: 20rpx;flex: 1;">
					<u--input v-model="userdata.nickname" border="none" inputAlign="right"></u--input>
				</view>
			</u-form-item>
			<u-form-item label="性别" prop="sex" borderBottom>
				<view class="" style="padding-right: 20rpx;flex: 1;">
					<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="cancel"></u-picker>
					<view class="sexbox" @click="show = !show">
						{{ userdata.sex == 0 ?'':userdata.sex == 1 ? "男" : "女" }}
					</view>

				</view>
			</u-form-item>
			<u-form-item label="地址" prop="areaId" borderBottom>
				<view class="" style="padding-right: 20rpx; flex: 1;height: 40rpx;"
					@click="showAreaTree(userdata.areaId)">
					{{ findAreaByCode(areaTree, userdata.areaId) || '请选择' }}

				</view>
			</u-form-item>
		</u--form>
		<area-tree ref="areaTree" :areaTree="areaTree" v-model="userdata.areaId"></area-tree>
		<bottombox>
			<u-button type="primary" :loading="loading" text="提交" shape="circle" @click="onedit"></u-button>
		</bottombox>
	</view>
</template>

<script>
	import {
		getUser,
		updateUser,
		getAreaTree
	} from "@/api/user.js"
	import {
		chooseFile
	} from '@/uni_modules/uview-ui/components/u-upload/utils.js';
	import upload from "@/utils/upload.js"
	import areaTree from "../components/areaTree.vue"
	export default {
		components: {
			areaTree
		},
		data() {
			return {
				userdata: {},
				loading: false,
				columns: [
					['男', '女']
				],
				show: false,
				areaTree: []
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {

				let userdata = await getUser();
				this.userdata = userdata.data
				let areaTree = await getAreaTree();
				this.areaTree = areaTree.data
			},
			async avatartap() {
				chooseFile({
					accept: "image",
				}).then(e => {
					upload({
						url: "/app-api/infra/file/upload",
						filePath: e[0].url
					}).then(e => {
						this.userdata.avatar = e.data
						console.log(e, 123);
					})
				})
			},
			async onedit() {
				this.loading = true;
				await updateUser(this.userdata)
				this.loading = false;
				this.$u.toast("修改成功")
				uni.navigateBack()
			},
			confirm(arr) {
				this.userdata.sex = arr.indexs[0] + 1
				this.show = false
			},
			cancel() {
				this.show = false
			},
			showAreaTree(targetCode) {
				this.$refs.areaTree.showPickerFn(targetCode);
			},
			findAreaByCode(areaTree, targetCode) {
				let province = null;
				let city = null;
				let district = null;

				for (const provinceNode of areaTree) {
					if (provinceNode.children) {
						for (const cityNode of provinceNode.children) {
							if (cityNode.children) {
								for (const districtNode of cityNode.children) {
									if (districtNode.id === targetCode) {
										province = provinceNode.name;
										city = cityNode.name;
										district = districtNode.name;
										return `${province} ${city} ${district}`;
									}
								}
							}
						}
					}
				}

				return ''; // 如果未找到对应编码
			},
		}
	}
</script>

<style>
	page {
		background: #fff;
	}

	.sexbox {
		flex: 1;
		text-align: right;
		height: 40rpx;
	}
</style>